
<template>
	<div class="yongjinjilu">
    <div v-if="!shoujiban">
      <left></left>
      <div class="right">
        <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/yongjin' }">财务管理</el-breadcrumb-item>
            <el-breadcrumb-item>佣金收入结算</el-breadcrumb-item>
          </el-breadcrumb>
          <top></top>
        </div>
        <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
          <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
            <div><img src="../../../static/img/yongjin3.png" style="width: 22px; margin-right: 10px;"></div>
            <div>已结算佣金记录</div>
          </div>

          <el-table :data="list" style="width: 100%">
            <el-table-column align="center" prop="created_at" label="提现时间"></el-table-column>
            <el-table-column align="center" prop="orders_count" label="结算订单"></el-table-column>
            <el-table-column align="center" prop="sum_commission" label="结算金额(元)"></el-table-column>
            <el-table-column align="center" label="提现状态">
              <template slot-scope="scope">
                <div v-if="scope.row.status == 10" style="color: rgb(9, 134, 0);">已提现</div>
                <div v-if="scope.row.status == 0" style="color: rgb(236, 82, 1);">待打款</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <div @click="xiazai(scope.row.id)" style="color: rgb(0, 90, 255); cursor: pointer;">下载明细</div>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page"
           @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>
		   <!-- <footers></footers> -->
        </div>
      </div>
    </div>


    <!-- <el-dialog title="设置排序" :visible.sync="paixu_log" width="440px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div><el-input v-model="dangqianshangpin.order" style="width: 360px;"></el-input></div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paixu_log = false">关闭</el-button>
        <el-button type="primary" @click="xiugai">确定</el-button>
      </span>
    </el-dialog> -->
    <div v-if="shoujiban" style=" color: rgb(2, 12, 29); font-size: 0.24rem; background: #f6f8fb; padding-top: 1rem;">
      <topandleft></topandleft>
      <div style="background: #fff; padding: 0.3rem;">
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="width: 2px; height: 0.2rem; background: rgb(2, 12, 29); margin-right: 10px; overflow: hidden;"></div>
          <div style="font-size: 0.36rem; font-weight: bold;">财务管理</div>
        </div>
        <div class="flexc" style="margin-bottom: 0.3rem;">
          <div style="color: rgb(175, 179, 188);">首页</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div style="color: rgb(175, 179, 188);">财务管理</div>
          <div style="margin: 0 0.2rem;color: rgb(175, 179, 188);">·</div>
          <div>佣金收入结算</div>
        </div>
      </div>
      <div style="padding: 0.3rem;">
        <div style="padding: 0px 0 19px 0; font-size: 18px; font-weight: 700;" class="flex">
          <div><img src="../../../static/img/yongjin3.png" style="width: 22px; margin-right: 10px;"></div>
          <div>佣金收入结算</div>
        </div>
        <van-list  v-model="loading"  :finished="finished"  finished-text="没有更多了"  @load="onLoad">
            <div v-for="item in list" :key="item.id" style="background: #fff; padding: 0.2rem; margin-bottom: 0.2rem; border-radius: 0.2rem;">

              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>提现时间</div>
                <div>{{item.created_at}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>结算订单</div>
                <div>{{item.orders_count}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>结算金额(元)</div>
                <div>{{item.sum_commission}}</div>
              </div>
              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>提现状态</div>
                <div v-if="item.status == 10" style="color: rgb(9, 134, 0);">已提现</div>
                <div v-if="item.status == 0" style="color: rgb(236, 82, 1);">待打款</div>
              </div>

              <div class="flexbc" style="margin-bottom: 0.2rem;">
                <div>操作</div>
                <div @click="xiazai(item.id)" style="color: rgb(0, 90, 255); cursor: pointer;">下载明细</div>
              </div>



            </div>
        </van-list>

      </div>
    </div>

	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import topandleft from '../topandleft.vue'
	export default {
		name: 'yongjinjilu',
    components:{
      left,top,topandleft,footers
    },
		data() {
			return {
        search:{
          page:1,
          page_size:20,
        },
        list:[],
        total:0,
        widthss:false,

        shoujiban:false,
        loading: false,
        finished: false,
			}
		},
		created() {
      // this.getlist()
		},
		mounted() {
      if(window.screen.width == 1920){
        this.widthss = true
      }
      if(window.screen.width < 1080){
        this.shoujiban = true
        var h = document.documentElement.clientWidth / 7.5 + 'px';
        document.documentElement.style.fontSize = h;

        // this.onLoad()
      }else{
        this.getlist()
      }
		},
		methods: {
      onLoad() {
        axios.get('/agent/commission/withdraws',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(response.data.data.data.length > 0){
              response.data.data.data.forEach(item=>{
                this.list.push(item)
              })

              if (this.list.length >= response.data.data.total) {
                this.finished = true;

              }else{
                this.search.page++
                this.loading = false;
              }
            }else{
              this.finished = true;
            }

        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      xiazai:function(id){
		  var ua = window.navigator.userAgent.toLowerCase();
		  var isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1;
		  if (isAndroid) {
		    window.Android.toast('请到小螺号电脑端后台管理系统下载')
		  }else{
			  axios.post('/agent/commission/withdrawdetailexp',{id:id}).then((response)=>{
			  	if (response.data.msg.code == 0) {
			      window.location.href = location.origin + '/' + response.data.data
			  	} else {
			  		this.$message.error(response.data.msg.info);
			  	}
			  })
		  } 
      },
      sousuo:function(){
        this.search.page = 1
        this.getlist()
      },
      getlist:function(){
        axios.get('/agent/commission/withdraws',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.list = response.data.data.data
            this.total = response.data.data.total
            this.loading = false
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      }
		}
	}
</script>


<style scoped lang="less">
  .yongjinjilu{

  }
</style>
